<template>
  <div>
    <el-submenu v-if="MenuData && MenuData.children" @click.native.stop="menuClick(MenuData)" :index="MenuData.name">
      <template slot="title">
        <i :class="MenuData.icon || 'el-icon-menu'"></i>
        <span :class="{ active: active == MenuData.name }">{{ MenuData.name }}</span>
      </template>
      <menu-item
        v-for="(item, index) in MenuData.children"
        :MenuData="item"
        :key="index"
        :currentPath="getCurrentPath(item.path)"
        :active="active" />
    </el-submenu>
    <el-menu-item v-else :index="MenuData.name" @click.native.stop="menuClick(MenuData)">
        <i :class="MenuData.icon || 'el-icon-menu'"></i>
        <span slot="title">{{ MenuData.name }}</span>
    </el-menu-item>
  </div>
</template>
<script>
export default {
  name: 'MenuItem',
  props: {
    MenuData: {
      type: Object,
      default: function () {
        return {}
      }
    },
    currentPath: {
      type: String,
      default: ''
    },
    active: {
      type: String,
      default: ''
    }
  },
  methods: {
    getCurrentPath (path) {
      return this.currentPath + '/' + path
    },
    menuClick (MenuData) {
      if (this.$route.path !== this.currentPath) {
        if (!MenuData.redirect) {
          this.$router.push({ path: this.currentPath })
        }
      }
    }
  }
}
</script>

<style scoped>
.active {
  color: #409eff!important;
}
</style>
